<template>
  <div>
    <!-- 查询区域 -->
    <div class="card" style="margin-bottom: 5px">
      <el-card>
        <el-input
          style="width: 200px; margin-right: 10px"
          v-model="a_pay_order.cname"
          placeholder="课程名称"
          prefix-icon="Search"
        />
        <el-input
          style="width: 200px; margin-right: 10px"
          v-model="a_pay_order.oid"
          placeholder="订单ID"
          prefix-icon="Search"
        />
        <el-select
          v-model="a_pay_order.status"
          placeholder="支付状态"
          style="width: 150px; margin-right: 10px"
        >
          <el-option label="全部" value="" />
          <el-option label="待支付" value="待支付" />
          <el-option label="已支付" value="已支付" />
          <el-option label="已取消" value="已取消" />
        </el-select>
        <el-button type="primary" @click="load">查 询</el-button>
        <el-button type="warning" @click="reset">重 置</el-button>
        <el-button type="info" @click="$router.go(-1)">返 回</el-button>
      </el-card>
    </div>

    <!-- 操作按钮 -->
    <div class="card" style="margin-bottom: 5px">
      <el-button type="danger" @click="handleBatchDelete">批量删除</el-button>
    </div>

    <!-- 表格 -->
    <div class="card" style="margin-bottom: 5px">
      <el-table
        :data="a_pay_order.tableData"
        border
        style="width: 100%"
        stripe
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55" />
        <el-table-column label="编号" type="index" width="60" />
        <el-table-column label="订单ID" prop="oid" width="100" />
        <el-table-column label="用户ID" prop="uid" width="100" />
        <el-table-column label="课程ID" prop="cid" width="100" />
        <el-table-column label="课程名称" prop="cname" />
        <el-table-column label="金额" prop="total" width="120">
          <template #default="{row}">¥{{ row.total.toFixed(2) }}</template>
        </el-table-column>
        <el-table-column label="创建时间" prop="createTime" width="180">
          <template #default="{row}">{{ formatTime(row.createTime) }}</template>
        </el-table-column>
        <el-table-column label="支付状态" prop="status" width="120">
          <template #default="{row}">
            <el-tag :type="statusTagType(row.status)">
              {{ row.status }}
            </el-tag>
          </template>
        </el-table-column>

        <!-- 操作列 -->
        <el-table-column label="操作" width="150">
          <template #default="scope">
            <div style="display: flex; gap: 5px; flex-direction: column">
              <el-button
                type="danger"
                :icon="Delete"
                size="small"
                @click="handleDelete(scope.row)"
              >删除</el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页 -->
      <div style="margin-top: 20px; text-align: right;">
        <el-pagination
          @size-change="load"
          @current-change="load"
          v-model:current-page="a_pay_order.pageNumber"
          v-model:page-size="a_pay_order.pageSize"
          :page-sizes="[5, 10, 15, 20]"
          layout="total, sizes, prev, pager, next, jumper"
          :total="a_pay_order.total"
          background
        />
      </div>
    </div>
  </div>
</template>

<script setup>
import { reactive, onMounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { Delete } from '@element-plus/icons-vue'
import request from '@/utils/request'

const a_pay_order = reactive({
  oid: '',
  cname: '',
  status: '',
  pageNumber: 1,
  pageSize: 10,
  total: 0,
  tableData: [],
  selectedRows: []
})

// 格式化时间显示
const formatTime = (time) => {
  return new Date(time).toLocaleString()
}

// 状态标签样式
const statusTagType = (status) => {
  switch(status) {
    case '已支付': return 'success'
    case '待支付': return 'warning'
    case '已取消': return 'info'
    default: return ''
  }
}

const load = () => {
  request.get('/v1/admin/selectPage', {
    params: {
      tableName: 'pay_order',
      id: a_pay_order.oid,
      name: a_pay_order.cname,
      status: a_pay_order.status,
      pageNum: a_pay_order.pageNumber,
      pageSize: a_pay_order.pageSize
    }
  }).then(res => {
    if (res.state === 2001) {
      a_pay_order.tableData = res.data.list || []
      a_pay_order.total = res.data.total || 0
    } else {
      a_pay_order.tableData = []
      a_pay_order.total = 0
    }
  }).catch(error => {
    console.error('请求失败:', error)
    a_pay_order.tableData = []
    a_pay_order.total = 0
  })
}

const reset = () => {
  a_pay_order.oid = ''
  a_pay_order.cname = ''
  a_pay_order.status = ''
  load()
}

const handleDelete = (row) => {
  ElMessageBox.confirm('确定要删除该订单吗？', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    request.delete('/v1/admin/delete', {
      data: {
        tableName: 'pay_order',
        id: row.oid
      }
    }).then(res => {
      if (res.state === 2001) {
        ElMessage({ message: '删除成功', type: 'success' })
        load()
      } else {
        ElMessage({ message: '删除失败', type: 'error' })
      }
    })
  }).catch(() => {})
}

const handleBatchDelete = () => {
  if (a_pay_order.selectedRows.length === 0) {
    ElMessage({ message: '请选择要删除的订单', type: 'warning' })
    return
  }

  ElMessageBox.confirm('确定要批量删除选中订单吗？', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    const ids = a_pay_order.selectedRows.map(row => row.oid)
    request.delete('/v1/admin/batchDelete', {
      data: {
        tableName: 'pay_order',
        ids: ids
      }
    }).then(res => {
      if (res.state === 2001) {
        ElMessage({ message: '批量删除成功', type: 'success' })
        load()
      } else {
        ElMessage({ message: '批量删除失败', type: 'error' })
      }
    })
  }).catch(() => {})
}

const handleSelectionChange = (rows) => {
  a_pay_order.selectedRows = rows
}

onMounted(() => {
  load()
})
</script>

<style scoped>
.card {
  margin-bottom: 10px;
}
</style>
